<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit8</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <!-- 引入页面图标信息 -->
    <link rel="icon" href="./assets/images/logo.png" />
    <link rel="apple-touch-icon" href="./assets/images/logo.png" />
    <meta name="msapplication-TileImage" content="./assets/images/logo.png" />

    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- 引入animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 引入index页面 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
    <!-- 头部 -->
    <header id="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <!-- 移动端才显示的三个横杠 -->
                    <button type="button" class="navbar-toggle collapsed wow bounceInRight" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo元素 -->
                    <a class="navbar-brand logo wow bounceInLeft" href="#banner">Spirit8</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="wow bounceInDown" href="#banner">HOME</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#about">About</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#team">team</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="200ms" href="#CLIENTS">CLIENTS</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="300ms" href="#work">work</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="400ms" href="#testimonials">testimonials</a></li>
                        <li><a class="wow bounceInDown" data-wow-delay="400ms" href="#contact">contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- banner背景 -->
    <div class="banner" id="banner">
        <div class="box">
            <h3 class="title wow bounceIn" data-wow-delay="100ms">
                wELCOME on
                <span>spirit8</span>
            </h3>

            <p class="info wow bounceIn" data-wow-delay="200ms">
                We are a digital agency with
                <span>years of experience</span> and with
                <span>extraordinary people</span>
            </p>

            <div class="more wow fadeInUp" data-wow-delay="300ms">
                <a href="#footer">↓</a>
            </div>
        </div>
    </div>

    <!-- About -->
    <div class="about" id="about">
        <div class="about-left wow bounceInLeft">
            <img src="./assets/images/about-background.png" alt="">
        </div>
        <div class="about-right">
            <div class="title wow fadeInUp">
                <p class="small">About us</p>
                <h3 class="big">
                    <span>Some</span>
                    words
                    <span>about us</span>
                </h3>
            </div>
            <div class="resume wow fadeInUp" data-wow-delay="150ms">
                <p>
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand
                    companies in a way they will never forget.
                </p>
            </div>
            <ul class="list">
                <li class="wow fadeInUp" data-wow-delay="200ms">
                    <span class="glyphicon glyphicon-record"></span>
                    <span>Mission - </span>
                    We deliver uniqueness and quality
                </li>
                <li class="wow fadeInUp" data-wow-delay="300ms">
                    <span class="glyphicon glyphicon-record"></span>
                    <span>Skills - </span>
                    Delivering fast and excellent results
                </li>
                <li class="wow fadeInUp" data-wow-delay="400ms">
                    <span class="glyphicon glyphicon-record"></span>
                    <span>Clients -</span>
                    Satisfied clients thanks to our experience
                </li>
            </ul>
            <div class="box wow fadeInUp" data-wow-delay="500ms">
                <div class="icon">
                    <img src="./assets/images/about-btn.png">
                </div>
                <span class="name">Browse our work</span>
            </div>
        </div>
    </div>

    <!-- team -->
    <div class="team" id="team">
        <div class="bigbox">
            <h3 class="title wow fadeInUp">
                Meet <span>our team</span>
            </h3>
            <div class="four">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <img src="./assets/images/cover.png" class="wow fadeInUp">
                    <div class="font">
                        <h1 class="wow fadeInUp">Jason Statham</h1>
                        <h4 class="wow fadeInUp">Knife designer</h4>
                        <p class="wow fadeInUp">Do not seek to change what has come before. Seek to create that which
                            has not.</p>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="150ms">
                    <img src="./assets/images/cover.png" class="wow fadeInUp">
                    <div class="font">
                        <h1 class="wow fadeInUp">Van Damme</h1>
                        <h4 class="wow fadeInUp">No English</h4>
                        <p class="wow fadeInUp">Do not seek to change what has come before. Seek to create that which
                            has not.</p>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <img src="./assets/images/cover.png" class="wow fadeInUp">
                    <div class="font">
                        <h1 class="wow fadeInUp">Sylvester Stallone</h1>
                        <h4 class="wow fadeInUp">Cigar Lover</h4>
                        <p class="wow fadeInUp">Do not seek to change what has come before. Seek to create that which
                            has not.</p>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="250ms">
                    <img src="./assets/images/cover.png" class="wow fadeInUp">
                    <div class="font">
                        <h1 class="wow fadeInUp">Jet Li</h1>
                        <h4 class="wow fadeInUp">I need more money</h4>
                        <p class="wow fadeInUp">Do not seek to change what has come before. Seek to create that which
                            has not.</p>
                    </div>
                </div>
            </div>
            <div class="dots wow fadeInUp" data-wow-delay="300ms">
                <label class="dot"></label>
                <label class="dot"></label>
                <label class="dot"></label>
            </div>
        </div>
    </div>

    <!-- services -->
    <div class="services" id="services">
        <div class="bigbox">
            <div class="title wow fadeInUp">
                <h1>take a look at<span> our services</span></h1>
            </div>
            <div class="Lorem wow fadeInUp" data-wow-delay="100ms">
                <p>
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of
                    Good and Evil)
                    by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
                    the
                    Renaissance. The
                    first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </p>
            </div>
            <div class="item">
                <div class="one wow fadeInUp" data-wow-delay="200ms">
                    <div class="image"">
                        <img src=" ./assets/images/01.png">
                    </div>
                    <div class="font">
                        <h3>Web&nbsp;design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <div class="one wow fadeInUp" data-wow-delay="200ms">
                    <div class="image"">
                        <img src=" ./assets/images/02.png">
                    </div>
                    <div class="font">
                        <h3>Web&nbsp;design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <div class="one wow fadeInUp" data-wow-delay="200ms">
                    <div class="image"">
                        <img src=" ./assets/images/03.png">
                    </div>
                    <div class="font">
                        <h3>Web&nbsp;design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <div class="one wow fadeInUp" data-wow-delay="200ms">
                    <div class="image"">
                        <img src=" ./assets/images/04.png">
                    </div>
                    <div class="font">
                        <h3>Web&nbsp;design</h3>
                        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CLIENTS -->
    <div class="CLIENTS" id="CLIENTS">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1> SOME OF <span>OUR CLIENTS</span></h1>
            </div>
            <div class="layer wow fadeInUp" data-wow-delay="200ms">
                <img src="./assets/images/Layer 64.png">
                <img src="./assets/images/Layer 65.png">
                <img src="./assets/images/Layer 67.png">
                <img src="./assets/images/Layer 68.png">
                <img src="./assets/images/Layer 69.png">
            </div>
            <div class="dots wow fadeInUp" data-wow-delay="300ms">
                <label class="dot"></label>
                <label class="dot"></label>
                <label class="dot"></label>
            </div>
        </div>
    </div>

    <!-- Work -->
    <div class="work" id="work">
        <div class="bigbox">
            <!-- 标题 -->
            <div class="title wow fadeInUp">
                <h1>take a look at <span>our work</span></h1>
            </div>
            <!-- 文字 -->
            <p class="desc wow fadeInUp" data-wow-delay="100ms">>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
                "de Finibus Bonorum et Malorum" (The
                Extremes of
                Good and
                Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.
                The
                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </p>
            <!-- 图片组 -->
            <div class="items">
                <div class="tiemtitle">
                    <div class="left wow bounceInLeft" data-wow-delay="100ms">Filter by type</div>
                    <div class="right wow bounceInRight" data-wow-delay="100ms">
                        <ul>
                            <li><a href="#">All</a></li>
                            <li><a href="#">Web Design</a></li>
                            <li><a href="#">Mobile Design</a></li>
                            <li><a href="#">Photograpy</a></li>
                        </ul>
                        <div class="select wow bounceInRight" data-wow-delay="100ms">
                            <select name="select">
                                <option>请选择</option>
                                <option>All</option>
                                <option>Web design</option>
                                <option>Mobile design</option>
                                <option>Photograpy</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="imgbox">
                    <ul>
                        <!-- 第一行 -->
                        <li class="wow fadeInUp" data-wow-delay="100ms">
                            <img src="./assets/images/work-img.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="100ms">
                            <img src="./assets/images/work-img.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="150ms">
                            <img src="./assets/images/work-img.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="200ms">
                            <img src="./assets/images/work-img.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <!-- 第二行 -->
                        <li class="wow fadeInUp" data-wow-delay="250ms">
                            <img src="./assets/images/work-img2.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="300ms">
                            <img src="./assets/images/work-img2.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="350ms">
                            <img src="./assets/images/work-img2.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="400ms">
                            <img src="./assets/images/work-img2.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <!-- 第三行 -->
                        <li class="wow fadeInUp" data-wow-delay="450ms">
                            <img src="./assets/images/work-img3.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="500ms">
                            <img src="./assets/images/work-img3.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="550ms">
                            <img src="./assets/images/work-img3.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                        <li class="wow fadeInUp" data-wow-delay="600ms">
                            <img src="./assets/images/work-img3.png" alt="">
                            <!-- 遮罩 -->
                            <div class="mask">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- testimonials -->
    <div class="testimonials" id="testimonials">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1>our clients’ <span>testimonials</span></h1>
            </div>
            <div class="desc wow fadeInUp" data-wow-delay="200ms">
                This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
                of Lorem Ipsum,
                "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
            <div class="CEO wow fadeInUp" data-wow-delay="300ms">
                Dean Martin, CEO Acme Inc.
            </div>
        </div>
        <div class="dots wow fadeInUp" data-wow-delay="400ms">
            <label class="dot"></label>
            <label class="dot"></label>
            <label class="dot"></label>
        </div>
    </div>

    <!-- contact -->
    <div class="contact" id="contact">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1>feel free to<span> contact us</span></h1>
            </div>
            <p class="wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
                Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.
            </p>
            <div class="form">
                <form method="post">
                    <div class="top">
                        <div class="left wow fadeInUp" data-wow-delay="300ms"">
                            <div class="name">Name<sup>*</sup></div>
                            <input type="text" name="name" required placeholder="请输入昵称" />
                        </div>
                        <div class="right wow fadeInUp" data-wow-delay="300ms">
                            <div class="email">Emaill<sup>*</sup></div>
                            <input type="email" name="emaill" required placeholder="请输入邮箱  " />
                        </div>
                    </div>
                    <div class="message wow fadeInUp" data-wow-delay="400ms">
                        <div class="name">Message<sup>*</sup></div>
                        <textarea name="message" required placeholder="请输入留言内容"></textarea>
                    </div>
                    <div class="send wow fadeInUp" data-wow-delay="500ms">
                        <button type="submit">SEND</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer" id="footer">
        <div class="bigbox">
            <div class="left wow fadeInUp" data-wow-delay="100ms">
                    ALL RIGHTS RESERVED. COPYRIGHT ©
                    <span>2014 SPIRIT8</span>
            </div>
            <div class="right">
                <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                    <img src="./assets/images/footer1.png" />
                </a>
                <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">
                    <img src="./assets/images/footer2.png" />
                </a>
                <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0)">
                    <img src="./assets/images/footer3.png" />
                </a>
                <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">
                    <img src="./assets/images/footer4.png" />
                </a>
                <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">
                    <img src="./assets/images/footer5.png" />
                </a>
            </div>
        </div>
    </div>

    <!-- up -->
    <div class="up" id="up">
        <a href="#banner">
            <img src="./assets/images/top.svg">
        </a>
    </div>
</body>

</html>
<!-- 引入less.js -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>
<script>
    //懒加载初始化
    new WOW().init()
</script>